<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "imiq") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Post-task Questionnaire</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Questionnaire -->
        <link href="questionnaire.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps ">
                    <p class="steps-done">Welcome &#10140; Outline &#10140; Personality Test &#10140; IFTTT Tutorial &#10140; Creating a Recipe &#10140;</p>
                    <p class="step-current">Questionnaire</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Post-task Questionnaire 1</h1>
            </div>

            <p class="lead">Please answer the following questions as they best describe your feeling and experience associated with creating the IFTTT recipe in the previous step.</p>

            <form class="form-horizontal" role="form" action='index.php' method='post' name='frm' id='frm'>
                <p class="qsectiontitle">Creating an IFTTT recipe:</p>
                <script>
                    var shuffle = function(array) {
                        var currentIndex = array.length, temporaryValue, randomIndex;

                        // While there remain elements to shuffle...
                        while (0 !== currentIndex) {

                            // Pick a remaining element...
                            randomIndex = Math.floor(Math.random() * currentIndex);
                            currentIndex -= 1;

                            // And swap it with the current element.
                            temporaryValue = array[currentIndex];
                            array[currentIndex] = array[randomIndex];
                            array[randomIndex] = temporaryValue;
                        }

                        return array;
                    }

                    var questions = [
                        "1 I enjoyed doing this very much.",
                        "2 This was fun to do.",
                        "3 I thought this was a boring activity.",
                        "4 It did not hold my attention at all.",
                        "5 I would describe this as very interesting.",
                        "6 I thought this was quite enjoyable.",
                        "7 While I was doing this, I was thinking about how much I enjoyed it.",
                        "8 Please do not answer this question."
                    ]

                    shuffle(questions);

                    for (var i = 0; i < questions.length; i++) {
                        var questionStr = questions[i].substr(questions[i].indexOf(" ") + 1);
                        var questionNumber = parseInt(questions[i].substr(0, questions[i].indexOf(" ")));

                        if (questionNumber == 8) {
                            document.write('<div class="question" id="q' + questionNumber + '">');
                        } else {
                            document.write('<div class="question compulsory" id="q' + questionNumber + '">');
                        }

                        document.write('<p>' + questionStr + '</p>');
                        document.write('<div class="scale-rate">');
                        document.write('<label for="inputQ' + questionNumber + '">Not at all true</label>');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="1" title="1">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="2" title="2">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="3" title="3">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="4" title="4">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="5" title="5">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="6" title="6">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="7" title="7">');
                        document.write('<label for="inputQ' + questionNumber + '">Very true</label>');
                        document.write('</div></div>');
                    }

                </script>


                <!-- --------- -->
                <input type="hidden" value="motivation" name="step" />
            </form>
            <hr>

            <div id="unanswered" class="alert alert-error">
                Please answer all of the questions.
            </div>

            <br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>

        </div>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var highlightUnanswered = function() {
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function() {
                        var input = $(this);
                        var name = input.attr("name");
                        //reset background color
                        input.parent().parent().attr("class", "question compulsory");
                        if (!$("input[name='" + name + "']:checked").val()) {
                            input.parent().parent().attr("class", "question compulsory alert-error");
                        }

                    });
                }

                var submitForm = function() {
                    //add questions inputs
                    $('.question').each(function() {
                        //question                
                        var question = $(this).children(':first-child').html();
                        $('#frm').append('<input type="hidden" name="question_' + $(this).attr("id") + '" value="' + question + '" />');
                        //question type
                        var questionType = $(this).children(':first-child').next().attr('class');
                        $('#frm').append('<input type="hidden" name="question_type_' + $(this).attr("id") + '" value="' + questionType + '" />');
                    });
                    //submit form
                    $('#frm').submit();
                }

                var continueStudy = function() {
                    $('#unanswered').hide();
                    var fieldEmpty = false;
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function() {
                        var input = $(this);
                        var name = input.attr("name");
                        if (!$("input[name='" + name + "']:checked").val()) {
                            fieldEmpty = true;
                            console.log(name)
                        }

                    });
                    //check if any compulosy field is empty
                    if (fieldEmpty) {
                        highlightUnanswered();
                        $('#unanswered').show();
                    } else {
                        // go to the next step
                        submitForm();
                    }
                }

                $('#unanswered').hide();
        </script>
    </body>
</html>
